<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			div.justify-content-between{
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h3>使用d-flex定义弹性盒子</h3>
			<div class="bg-secondary py-3 text-white d-flex flex-row-reverse">
				<div class="bg-info py-5">Flex item 1</div>
				<div class="bg-warning py-5">Flex item 2</div>
				<div class="bg-danger py-5">Flex item 3</div>
			</div>
			<h3>使用d-flex定义弹性盒子</h3>
			<div class="bg-secondary py-3 text-white d-flex align-items-center justify-content-between">
				<div class="bg-info py-5">Flex item 1</div>
				<div class="bg-warning py-5">Flex item 2</div>
				<div class="bg-danger py-5">Flex item 3</div>
			</div>
			<h3>使用d-flex定义弹性盒子</h3>
			<div class="bg-secondary py-3 text-white d-flex flex-column-reverse">
				<div class="bg-info py-5">Flex item 1</div>
				<div class="bg-warning py-5">Flex item 2</div>
				<div class="bg-danger py-5">Flex item 3</div>
			</div>
		</div>
	</body>
</html>
 